<template>
	<view class="box">
		<view class="tip">
			您当前手机号码为：{{phone}}
		</view>
		<view class="binding flex_dq" style="margin-top: 30px;">
			<u-input type="number" placeholder="请输入验证码" maxlength="6" v-model.trim="validateCode">
				<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
					<u-button @click="varify2()" :text="tips" type="success" size="mini"></u-button>
				</template>
			</u-input>
		</view>
		<!-- 	<view class="iptwrap">
			<text>新手机号:</text>
			<input type="text" :value="name" @input="getname" />
		</view> -->
		<view class="binding flex_dq">
			<u-input type="number" class="wraps" placeholder="请输入新的手机号" maxlength="11" v-model="newphone"></u-input>
		</view>

		<view class="btn" @click="gonext">
			完成
		</view>
		<u-popup :show="flag" mode="center" @close="flag=false" :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="popup-content">
				<text class="popup-title h2">提示</text>

				<view class="popup-center">
					您当前未进行绑定手机号，暂无法实名认证，现在去绑定
				</view>
				<text class="btns" @click="gobind">去绑定</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		myuser,
		sendSmsCode,
		changeBind
	} from "../../api/user.js"
	export default {
		data() {
			return {
				validateCode: "",
				tips: '',
				phone: "",
				randstr: "",
				ticket: "",
				newphone: "",
				flag: false
			}
		},
		onLoad() {
			this.getuser()
		},
		onReady() {},
		methods: {
			gobind() {
				uni.navigateTo({
					url: "/pageUser/myuser/bindphone"
				})
			},
			getuser() {
				myuser().then(res => {
					if (res.data.mobile == '') {
						this.flag = true
					}
					this.phone = res.data.mobile
				})
			},
			callback(res) {
				console.log(res)
				// 用户操作验证码或者关闭刷新腾讯返回的内容 
				let that = this
				if (res.ret === 0) {
					that.randstr = res.randstr
					that.ticket = res.ticket
					that.getCode()
					console.log("成功")
					//成功，传递数据给后台进行验证
					// 这里后台会给一个借口,把后台需要的参数传过去

				} else {
					console.log("验证失败")
					// 提示用户完成验证
				}
			},
			varify2() {
				// #ifdef H5
				if (uni.$u.test.isEmpty(this.phone)) {
					uni.$u.toast('请输入您的手机号');
				} else {
					this.varify()
				}

				// #endif
				// #ifdef MP-WEIXIN
				this.getCode()

				// #endif
				// #ifdef MP-ALIPAY
				if (uni.$u.test.isEmpty(this.phone)) {
					uni.$u.toast('请输入您的手机号');
				} else {
					console.log('getCodegetCodegetCodegetCode');
					this.getCode()
				}
				
				// #endif
			},
			varify() {
				let appid = '192455824'; // 腾讯云控制台中对应这个项目的 appid
				//生成一个滑块验证码对象
				let captcha = new TencentCaptcha(appid, this.callback);
				// 滑块显示
				captcha.show();

			},
			gonext() {
				if (this.validateCode.length < 6) {
					uni.$u.toast("请输入完整的验证码")
				} else if (!uni.$u.test.mobile(this.newphone)) {
					uni.$u.toast("请输入正确的手机号")
				} else {
					changeBind({
						mobile: this.newphone,
						sms_captcha_code: this.validateCode
					}).then(res => {
						if (res.code == 1) {
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
						uni.$u.toast(res.msg)
					})
				}

			},
			getname(e) {
				this.name = e.detail.value
				console.log(e)
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				// console.log(11111);
				let that = this;
				let data = {
					mobile: that.phone,
					template_code: 'user_change_mobile',
					rand_str: that.randstr,
					ticket: that.ticket
					
				}
				sendSmsCode(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						// that.validateCode=res.data
						uni.$u.toast(res.msg);
						if (that.$refs.uCode.canGetCode) {
							that.$refs.uCode.start();
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.opacity-50 {
		opacity: 0.5;
	}

	.iptwrap {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;

		>text {
			margin-left: 40rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #666666;
		}

		>input {
			width: 600rpx;
			padding-left: 20rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
		}
	}

	.opacity-100 {
		opacity: 1;
	}

	.iptwrap {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;

		>text {
			margin-left: 40rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #666666;
		}

		>input {
			width: 500rpx;
			padding-left: 20rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
		}
	}

	.tip {
		width: 690rpx;
		margin: 0 auto;
		font-weight: 400;
		font-size: 34rpx;
		color: #3D3D3D;
		margin-top: 76rpx;
	}

	.btn {
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 190rpx 190rpx 190rpx 190rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 56rpx;
	}

	.binding {
		width: 90%;
		margin: 0 auto;
		padding: 18rpx 0;
		border-radius: 60rpx;
		/* border-bottom: 1rpx solid #5a5a5a70; */
	}

	/deep/.u-button--success {
		background: none !important;
		border: none !important;
		color: #FFC300 !important;
	}

	/deep/.uni-input-input {
		color: #333;
		font-weight: 300;
		font-size: 30rpx;
	}

	/deep/.u-border {
		border: none;
		border-bottom: 2rpx solid #E5E5E5 !important;
	}

	/deep/.uni-input-wrapper {
		color: #A6A5AF !important;
	}

	/deep/.uni-input-placeholder {
		color: #A6A5AF !important;
	}

	.wraps {
		width: 690rpx;
		margin: 0 auto;



	}

	/* #ifdef MP-ALIPAY */
	/deep/.u-input__content__field-wrapper__field {
		background: transparent !important;
	}

	/* #endif */
	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48rpx;
		width: 602rpx;
		// height: 406rpx;
		padding-bottom: 50rpx;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 22rpx 22rpx;


	}

	.popup-title {
		margin-top: 40rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #333333;
	}

	.popup-center {
		width: 484rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: auto;

		>image {
			margin-left: 14rpx;
			width: 20rpx;
			height: 20rpx;
		}
	}

	.btns {
		width: 264rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 280rpx 280rpx 280rpx 280rpx;
		text-align: center;
		line-height: 72rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>